<template>
	<canvas class="canvasId" canvas-id="canvasId" style="width: 600rpx;height: 950rpx;"></canvas>
</template>
<script>
	import QrCodeGenerator from '@/components/piaoyi-poster/QrCodeGenerator.vue'
	export default {
		data() {
			return {
				ctx: null,
				canvasWidth: 340,
				canvasHeight: 800,
				deviceType: '' // 存储设备类型，用于区分安卓和苹果设备
			};
		},
		props: {
			imgImage: {
				type: String,
				default: '' // 默认本地图片
			},
			qrImage: {
				type: String,
				default: '' // 默认本地二维码图片
			},
			title: {
				type: String,
				default: 'ikran 影视厅'
			},
			shopName: {
				type: String,
				default: 'ikran 影视厅'
			},
			detail: {
				type: String,
				default: '超蓝光，无删减，最新精彩影片'
			},
			price: {
				type: Number,
				default: 90
			},
			years: {
				type: String,
				default: '2025'
			},
			yurts: {
				type: String,
				default: ''
			},
			tags1: {
				type: String,
				default: ''
			},
			tags2: {
				type: String,
				default: ''
			},
			tags3: {
				type: String,
				default: ''
			}
		},
		mounted() {
			this.ctx = uni.createCanvasContext('canvasId', this)
			this.getDeviceInfo();
		},
		methods: {
			// 获取设备信息并判断设备类型
			getDeviceInfo() {
				try {
					const sysInfo = uni.getSystemInfoSync();
					const ratio = sysInfo.windowWidth / 750; // 计算 rpx 到 px 的转换比例
					this.canvasWidth = 600 * ratio;
					this.canvasHeight = 950 * ratio;
					// 判断设备类型
					this.deviceType = sysInfo.platform === 'android' ? 'android' : 'ios';
					this.init();
				} catch (e) {
					console.error('获取设备信息失败:', e);
					return null;
				}
			},
			open() {
				uni.showLoading({
					title: '请稍后...'
				})
				this.init()
				console.log("该绘制的图片：", this.imgImage);
			},
			init() {
				uni.getImageInfo({
					src: this.imgImage,
					success: (res) => {
						uni.getImageInfo({
							src: this.qrImage,
							success: (tes) => {
								// 使用导入的图片变量
								this.ctx.drawImage(res.path, 0, 0, this.canvasWidth, this
									.canvasHeight)

								// 统一布局计算（基于750rpx基准）
								const offsetX = 0;
								const offsetY = 0;

								// 绘制标题区域
								this.ctx.beginPath()
								// this.ctx.moveTo(80 + 25, 0 )
								// this.ctx.lineTo(90 + 25, 25 )
								// this.ctx.lineTo(210 + 25, 25)
								// this.ctx.lineTo(220 + 25, 0)
								this.ctx.moveTo(this.canvasWidth / 3, 0)
								this.ctx.lineTo(this.canvasWidth / 3 + 10, 25)
								this.ctx.lineTo(this.canvasWidth / 1.5, 25)
								this.ctx.lineTo(this.canvasWidth / 1.5 + 10, 0)

								this.ctx.setStrokeStyle('#DA2A1E')
								this.ctx.setFillStyle('#DA2A1E')
								this.ctx.fill()
								this.ctx.setFontSize(14)
								this.ctx.setFillStyle("#fff")
								this.ctx.setTextAlign('center')
								this.ctx.fillText(this.title, this.canvasWidth / 2 + 5, 17)

								// 设置阴影属性
								this.ctx.shadowOffsetX = 2;
								this.ctx.shadowOffsetY = 2;
								this.ctx.shadowColor = '#000';
								this.ctx.shadowBlur = 5;

								this.ctx.fillText(this.detail, this.canvasWidth / 2, 50);

								// 设置填充颜色
								this.ctx.setFillStyle('#fff');

								// 设置阴影效果
								this.ctx.shadowOffsetX = 0;
								this.ctx.shadowOffsetY = 0;
								this.ctx.shadowColor = '#ccc';
								this.ctx.shadowBlur = 5;

								// 圆角矩形参数
								const x = 0,
									y = this.canvasHeight - 140,
									w = this.canvasWidth,
									h = 165,
									r = 15;

								// 开始路径
								this.ctx.beginPath();
								// 左上角圆角
								this.ctx.moveTo(x + r, y);
								this.ctx.lineTo(x + w - r, y);
								this.ctx.arcTo(x + w, y, x + w, y + r, r);

								// 右上角圆角
								this.ctx.lineTo(x + w, y + h - r);
								this.ctx.arcTo(x + w, y + h, x + w - r, y + h, r);

								// 右下角圆角
								this.ctx.lineTo(x + r, y + h);
								this.ctx.arcTo(x, y + h, x, y + h - r, r);

								// 左下角圆角
								this.ctx.lineTo(x, y + r);
								this.ctx.arcTo(x, y, x + r, y, r);

								// 完成路径
								this.ctx.closePath();

								// 填充绘制
								this.ctx.fill();

								this.ctx.setFillStyle("#000")
								this.ctx.setTextAlign('left')
								this.ctx.setFontSize(12)
								this.ctx.setFontSize(18)
								this.ctx.fillText(this.shopName, 20, this.canvasHeight - 110)
								this.ctx.setFontSize(10)
								this.ctx.fillText('', 47 + (this.price + '').length * 12 + offsetX,
									319 + offsetY)
								this.ctx.setFontSize(12)
								this.drawText(this.years, 20, this.canvasHeight - 110, 230, 12, 18)
								this.drawText('|', 60, this.canvasHeight - 110, 230, 14, 18)
								this.drawText(this.yurts, 72, this.canvasHeight - 110, 230, 12, 18)
								this.drawText('|', 102, this.canvasHeight - 110, 230, 12, 18)
								this.drawText(this.tags1, 120, this.canvasHeight - 110, 230, 12,
									18)
								this.drawText(this.tags2, 150, this.canvasHeight - 110, 230, 12,
									18)
								this.drawText(this.tags3, 180, this.canvasHeight - 110, 230, 12,
									18)

								const radius = 38;
								// const centerX = this.canvasWidth - 106 + offsetX; 
								// const centerY = 460 + offsetY;

								const centerX = this.canvasWidth - 90;
								const centerY = this.canvasHeight - 85;

								this.ctx.setFontSize(18)
								this.ctx.fillStyle = '#000';
								this.ctx.fillText('请扫码观看！', centerX - 170 + offsetX, centerY +
									45 + offsetY);

								// 绘制方形二维码
								this.ctx.drawImage(tes.path, centerX, centerY, radius * 2, radius *
									2);

								this.ctx.draw(false, () => {
									setTimeout(() => {
										uni.canvasToTempFilePath({
											canvasId: 'canvasId',
											success: (res) => {
												console.log("绘制图片信息",
													res)
												this.$emit(
													'tempFilePath',
													res
													.tempFilePath)
											},
											fail: (error) => {
												uni.showToast({
													title: JSON
														.stringify(
															error
														),
													icon: 'none'
												})
											},
											complete: () => {
												uni.hideLoading()
											}
										}, this);
									}, 300)
								});
							}
						});
					}
				});
			},
			drawText(text, x, y, width, fs, rowHeight) {
				let test = text.split("")
				let temp = ""
				let row = []
				this.ctx.font = `${fs}px 微软雅黑`
				this.ctx.fillStyle = "#333"
				this.ctx.textBaseline = "middle"
				for (let i = 0; i < test.length; i++) {
					if (this.ctx.measureText(temp).width > width) {
						row.push(temp)
						temp = ""
					}
					temp += test[i]
				}
				row.push(temp)
				for (let j = 0; j < row.length; j++) {
					this.ctx.fillText(row[j], x, y + (j + 1) * rowHeight)
				}
			},
			Point(x, y) {
				return {
					x: x,
					y: y
				};
			},
			Rect(x, y, w, h) {
				return {
					x: x,
					y: y,
					width: w,
					height: h
				};
			}
		}
	}
</script>


<style scoped lang="scss">
	.canvasId {
		position: fixed;
		left: -200vw;
		top: 0;
	}
</style>